<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=sClwXDCZC6GLOdLlYevqoiEzfaUFzqP3"></script>
  <script type="text/javascript" src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DistanceTool/src/DistanceTool.min.js"></script>
  <script type="text/javascript" src="//mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>
  <link href="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">

  <title>鼠标测距工具(GL)</title>
  <style type="text/css">
    body,
    html,
    #container {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      font-family: "微软雅黑";
    }

    ul li {
      list-style: none;
    }

    .drawing-panel {
      z-index: 999;
      position: fixed;
      bottom: 9rem;
      margin-left: 3rem;
      padding: 1rem 1rem;
      border-radius: .25rem;
      background-color: #fff;
      box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }

    .draw-btn {
      width: 75px;
      height: 30px;
      background-color: #fff;
      color: rgba(27, 142, 236, 1);
      border: 1px solid rgba(27, 142, 236, 1);
      border-radius: 5px;
      margin: 0 5px;
    }

    .drawing-panel2 {
      z-index: 999;
      position: fixed;
      bottom: 3.5rem;
      margin-left: 2.5rem;
      padding-left: 0;
      border-radius: .25rem;
      height: 47px;
      box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }

    .bmap-btn {
      border-right: 1px solid #d2d2d2;
      float: left;
      width: 64px;
      height: 100%;
      background-image: url(//api.map.baidu.com/library/DrawingManager/1.4/src/bg_drawing_tool.png);
      cursor: pointer;
    }

    .drawing-panel2 .bmap-marker {
      background-position: -65px 0;
    }

    .drawing-panel2 .bmap-polyline {
      background-position: -195px 0;
    }

    .drawing-panel2 .bmap-rectangle {
      background-position: -325px 0;
    }

    .drawing-panel2 .bmap-polygon {
      background-position: -260px 0;
    }

    .drawing-panel2 .bmap-circle {
      background-position: -130px 0;
    }
    /*去掉logo*/
    .BMap_cpyCtrl {
      display: none;
    }
    .anchorBL {
      display: none;
    }

  </style>
</head>

<body>

<ul class="drawing-panel">
  <input type="button" class="draw-btn" value="开启测距" onclick="myDis.open()">
  <input type="button" class="draw-btn" value="关闭测距" onclick="myDis.close()">
</ul>
<ul class="drawing-panel2">
  <li class="bmap-btn bmap-polyline" id="polyline" onclick="draw(this)"></li>
  <li class="bmap-btn bmap-rectangle" id="rectangle" onclick="draw(this)"></li>
  <li class="bmap-btn bmap-polygon" id="polygon" onclick="draw(this)"></li>
  <li class="bmap-btn bmap-circle" id="circle" onclick="draw(this)"></li>
</ul>
<div id="container"></div>
</body>

</html>
<script type="text/javascript">
  var map = new BMapGL.Map("container", {
    enableMapClick: false
  }); // 创建Map实例,GL版命名空间为BMapGL(鼠标右键控制倾斜角度)
  map.centerAndZoom(new BMapGL.Point(113.792703,36.307998), 15); // 初始化地图,设置中心点坐标和地图级别

  var myDis = new BMapGLLib.DistanceTool(map);

  // 监听测距过程中的鼠标事件
  myDis.addEventListener('drawend', function(e) {
    console.log("drawend");
    console.log(e.points);
    console.log(e.overlays);
    console.log(e.distance);
  });
  myDis.addEventListener("addpoint", function(e) {
    console.log("addpoint");
    console.log(e.point);
    console.log(e.pixel);
    console.log(e.index);
    console.log(e.distance);
  });
  myDis.addEventListener("removepolyline", function(e) {
    console.log("removepolyline");
    console.log(e);
  });

  var styleOptions = {
    strokeColor: '#5E87DB', // 边线颜色
    fillColor: '#5E87DB', // 填充颜色。当参数为空时，圆形没有填充颜色
    strokeWeight: 2, // 边线宽度，以像素为单位
    strokeOpacity: 1, // 边线透明度，取值范围0-1
    fillOpacity: 0.2 // 填充透明度，取值范围0-1
  };
  var labelOptions = {
    borderRadius: '2px',
    background: '#FFFBCC',
    border: '1px solid #E1E1E1',
    color: '#703A04',
    fontSize: '12px',
    letterSpacing: '0',
    padding: '5px'
  };

  // 实例化鼠标绘制工具
  var drawingManager = new BMapGLLib.DrawingManager(map, {
    enableCalculate: true, // 绘制是否进行测距测面
    enableSorption: true, // 是否开启边界吸附功能
    sorptiondistance: 20, // 边界吸附距离
    enableGpc: true, // 是否开启延边裁剪功能
    enableLimit: true, // 是否开启超限提示
    limitOptions: {
      area: 50000000, // 面积超限值
      distance: 30000 // 距离超限值
    },
    circleOptions: styleOptions, // 圆的样式
    polylineOptions: styleOptions, // 线的样式
    polygonOptions: styleOptions, // 多边形的样式
    rectangleOptions: styleOptions, // 矩形的样式
    labelOptions: labelOptions, // label样式
  });

  function draw(e) {
    var arr = document.getElementsByClassName('bmap-btn');
    for (var i = 0; i < arr.length; i++) {
      arr[i].style.backgroundPositionY = '0';
    }
    e.style.backgroundPositionY = '-52px';
    switch (e.id) {
      case 'marker':
      {
        var drawingType = BMAP_DRAWING_MARKER;
        break;
      }
      case 'polyline':
      {
        var drawingType = BMAP_DRAWING_POLYLINE;
        break;
      }
      case 'rectangle':
      {
        var drawingType = BMAP_DRAWING_RECTANGLE;
        break;
      }
      case 'polygon':
      {
        var drawingType = BMAP_DRAWING_POLYGON;
        break;
      }
      case 'circle':
      {
        var drawingType = BMAP_DRAWING_CIRCLE;
        break;
      }
    }
    // 进行绘制
    if (drawingManager._isOpen && drawingManager.getDrawingMode() === drawingType) {
      drawingManager.close();
    } else {
      drawingManager.setDrawingMode(drawingType);
      drawingManager.open();
    }
  };

  // 绘制完成后获取相关的信息(面积等)
  drawingManager.addEventListener('overlaycomplete', function(e) {
    alert(e.calculate);
  });
</script>